<template>
  <div>
    <Row :gutter="24" style="margin-top:20px;">
    </Row>
    <Row :gutter="20" > 
       <!--左  -->
      <i-col span="6">
        <div class="card_box" >
          <div class="card_title">
             <p class="title">交售频次
              </p> 
           <Select v-model="model1" class="model_select" >
             <Option v-for="item in lists" :value="item.value" :key="item.value">{{ item.label }}</Option>
           </Select>  
          </div> 
          <chart-doubar class="chart_bar1" :barData = "barData" text=""/>
        </div>
         <div class="card_box" style="margin-top:1.5vh;">
            <div class="card_title">
              <p class="title">当日交售数据             
              </p>
            </div>  
              <h1 class="title_data"><span>{{this.date}}</span><a>当前交售总数：1000</a></h1> 
            <chart-doubar class="chart_bar1" :barData = "lineData" text=""/>
        </div>
      </i-col>
        <!--中  -->
      <i-col span="12" style="padding-left:0;padding-right:0;">
      <div class="card_box" style="width:100%;" >
          <p class="title title_main" >红枣全产业链大数据展示中心</p>
          <div class="header_box">
          <i-col span="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" class="header_icon" >
            <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
                <p >{{ infor.title }}</p>
              <count-to :end="infor.count" count-class="count-style"/>
          
            </infor-card>
          </i-col>
          </div>
          <div class="built_box" >
            <ul  class="map_label">
              <li><span></span><a>已对接</a></li>
              <li><span></span><a>未对接</a></li>
            </ul>
            <chart-map  text=""/>   
          </div>
      </div>
       </i-col>
        <!--右 -->
        <i-col span="6">
        <div class="card_box" >
          <div class="card_title">
            <p class="title">品种占比（%）</p>
              <Select v-model="model1" class="model_select" >
                <Option v-for="item in lists" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>       
           </div>
            <div class="pie_percent">
           <i-circle
              class="circle_box"
            :size="86"
            :trail-width="10"
             trail-color="#3c4864"
            :stroke-width="10"
            :percent="68"
            stroke-linecap="square"
            stroke-color="#f03f58">
            <div class="demo-Circle-custom">
              <i style="color:#fff"><a>68</a>%</i>
                <span>
                  4500  
                </span>
             </div>
            </i-circle>
             <span style="margin-top:5px;color:#c3cad9;">骏枣</span>
            </div>
            <div  class="pie_percent">
            <i-circle
              class="circle_box"
            :size="86"
            :trail-width="10"
              trail-color="#3c4864"
            :stroke-width="10"
            :percent="24"
            stroke-linecap="square"
            stroke-color="#FFA63D">
            <div class="demo-Circle-custom">
              <i style="color:#fff"><a>24</a>%</i>
                <span>
                  4500  
                </span>
             </div>
            </i-circle>
              <span style="margin-top:5px;color:#c3cad9;">灰枣</span>
            </div>
           <div  class="pie_percent">
              <i-circle
              class="circle_box"
            :size="86"
            :trail-width="10"
             trail-color="#3c4864"
            :stroke-width="10"
            :percent="18"
            stroke-linecap="square"
            stroke-color="#00D98B">
            <div class="demo-Circle-custom">
              <i style="color:#fff"><a >18</a>%</i>
                <span>
                  4500  
                </span>
             </div>
            </i-circle>
              <span style="margin-top:5px;color:#c3cad9;">其它</span>
          </div> 
        </div>
        <div class="card_box" style="margin-top:0.5vh;">
            <div class="card_title">
            <p class="title">交售费用   </p> 
              <Select v-model="model1" class="model_select" >
              <Option v-for="item in lists" :value="item.value" :key="item.value">{{ item.label }}</Option>
             </Select>     
             </div>
            <chart-bar class="chart_bar" :barData = "carData" text=""/>
          
        </div>
        <div class="card_box" style="margin-top:0.5vh;">
            <div class="card_title">
              <p class="title">品级占比（%） </p> 
              <Select v-model="model1" class="model_select" >
              <Option v-for="item in lists" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            
           </div>
             <chart-pie  style="height:27.5vh;" :value="pieData1" :color ="pieColor" text="" ></chart-pie>
        </div>
      </i-col>
    </Row>
    <div class="home_open" @click="showHome" v-show="showhome">
      <p>进入系统</p></div>
  </div>
</template>

<script>
import InforCard from '_c/info-card-old'
import CountTo from '_c/count-to'
import { ChartPie,  ChartBar ,BarStrip,ChartMap,ChartCircle,ChartDoubar} from '_c/charts'
import {getRegionCarData,getRegionUnitData} from "@/api/data";
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    BarStrip,
    Example,
    ChartMap,
    ChartCircle,
    ChartDoubar
  },
  data () {
    return {
      pieColor:"#fff",
       animate:true,
        list:[0,0],
        num:0,
      showhome:true,
      date:"",
      className1:true,
      className2:false,
      seen:false,
      model1:"年度",
      lists: [
               {
                  value: '年度',
                  label: '年度'
                },
                {
                  value: '月度',
                  label: '月度'
                }     
                ],
      inforCardData: [
        { title: '全疆种植面积(亩)', count: 0, color: 'rgba(11,28,61,0)' },
        { title: '全疆红枣产量(吨)', count:0,color: 'rgba(11,28,61,0)'},
        { title: '单位总数（个）',  count:20000, color: 'rgba(11,28,61,0)'},
        { title: '运行费用(万元)', count: 4172,color: 'rgba(11,28,61,0)' },
        { title: '交售频次(次)',  count: 1200, color: 'rgba(11,28,61,0)' },
        { title: '质押率（%）',  count:7,color: 'rgba(11,28,61,0)' },
        { title: '出库率(%)',  count:98, color: 'rgba(11,28,61,0)' },
        { title: '贷款费用(万元)',  count: 2549, color: 'rgba(11,28,61,0)'},
      ],
      pieData1: [
        {value: 200, name: '灰枣特级'},
        {value: 310, name: '灰枣一级'},
        {value: 234, name: '灰枣二级'},
        {value: 135, name: '灰枣三级'},
      ],
        pieData2: [
        {value: 269, name: '一般公务'},
        {value: 150, name: '综合执法'},
        {value: 100, name: '执法执勤'},
        {value: 50, name: '其他'},
      ],
      circleColors:[ "#f03f58","#E4E4E4","#FFC933","#FF634D","#9A66E4","#ed3f14"],
       circleColors1:[ "#ffa63d","#E4E4E4","#FFC933","#FF634D","#9A66E4","#ed3f14"],
        circleColors2:[ "#00d98b","#E4E4E4","#FFC933","#FF634D","#9A66E4","#ed3f14"],
      circleData:[
         {value:68, name:'68%',},
		     {value:100-68, name:''}
        ],
        circleData2:[
         {value:24, name:'24%',},
		     {value:100-24, name:''}
        ],
        circleData3:[
         {value:18, name:'18%',},
		     {value:100-18, name:''}
		    ],
      barData:{
        color:[  "#78D6E2","#FFC933","#ff9900","#E46CBB","#9A66E4","#ed3f14"],
        barxAxisData:['骏枣特级', '骏枣一级', '灰枣特级', '灰枣一级'],
        baryAxisData:[ 
        {
            name:'次数（次）',
            type:'bar',
             barMaxWidth: '20', 
           data: [1900,4500,1200,6300] ,
           color:'#f3b839'
           }, 
        {
            name:'费用（万元）',
            type:'bar',
            barMaxWidth: '20', 
            yAxisIndex: 1,
               color:'#cb27c9',
           data: [300, 1000, 500, 2000],
        },
      ]
      },
      lineData:{
        color:[  "#2c78c9","#FFC933","#ff9900","#E46CBB","#9A66E4","#ed3f14"],
          barxAxisData:['灰枣特级', '灰枣一级', '灰枣二级', '灰枣三级','骏枣特级', '骏枣一级', '骏枣二级', '骏枣三级'],
        baryAxisData:[ 
        {
            name:'次数（次）',
            type:'line',
            // smooth: false,
             barMaxWidth: '20', 
           data:  [120, 132, 101, 134, 90, 230, 210,120,230,112,146,123,142,352],
           color:'#2c78c9'
           }, 
        {
            name:'费用（元）',
            type:'line',
            // smooth: false,
            barMaxWidth: '20', 
            yAxisIndex: 1,
               color:'#F45E23',
           data: [1200, 1032, 1001, 1034, 900, 2230, 2100,2300,2120,2120,502,1023,1402,1406],
        },
      ]
      },
       carData:{
        barxAxisData:['灰枣特级', '灰枣一级', '灰枣二级', '灰枣三级','骏枣特级', '骏枣一级', '骏枣二级', '骏枣三级', ],
        baryAxisData:[ 
        {
            name:'费用（万元）',
            type:'bar',
             barMaxWidth: '10', 
           data: [190,450,102,630,580,450,560,450,780,540,120,470,580,600] ,
           color:'#1C86F1'
           }, 
      ]
      }
    }
  },
  methods:{
    showHome(){
      this.$router.push({
              name: "unit"
            });
    },
    showIndex(){
      this.$router.push({
              name: "index"
            });
    },
    toggle(n){
      



    },
    getCarDatas(){
       getRegionCarData({}).then(res =>{
         if(res.code == 200){
          this.inforCardData[1].count= res.data[0].vehicleNum;
         }else{
          this.inforCardData[1].count = 0;

         }
       }).catch(err =>{
         this.inforCardData[1].count = 0;
       })
    },
    getUnitDatas(){
       getRegionUnitData({}).then(res =>{
         if(res.code == 200){
          this.inforCardData[2].count= res.data[0].num;
         }else{
          this.inforCardData[2].count = 0;

         }
       }).catch(err =>{
         this.inforCardData[2].count = 0;
       })
    }
    
  },
  mounted () {
    var myDate = new Date(); 
// 年、月、日用字符串“-”拼接
   var thisDate = myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate();
    this.date = thisDate;
    this.getCarDatas();
    this.getUnitDatas();
  },
   watch: {
      city:{
        handler(newV,oldV) {
            console.log('newV' + newV);
            console.log('oldV' + oldV);
            //this.openVideo(newV,4);
            //this.openVideo(newV,3);
        },
        immediate: true,
        deep: true
      }
  },
}
</script>

<style lang="less">
body{
  width: 100%;
    height: 100%;
  background-color:#F5F7F9;
   background-image: url('../../../assets/images/bj.jpg');
}
ul,li{
  margin:0;
  padding:0;
}
.pie_list{
  width:100%;
  height:360px;
  overflow:hidden;
}
.pie_list li{
  list-style:none;
  width:100%;
  height:360px;
  overflow:hidden;
  float:left;
}
.pie_list li.active{
  display:none;
}
.count-style{
  font-size: 26px;
  font-weight:bolder;
}
.header_box{
  width:100%;
  margin-left:0.5vw;
  height:auto;

}
.header_icon{
width:22%!important;
margin:0 1.3%;
height:7.6vh;
margin-bottom:2%;
background:rgba(11,28,61,0.7);
border:solid 1px rgba(153,204,255,0.7);
box-shadow:rgb(153, 204, 255,0.9) 0px 0px 10px inset;
border-radius:4px;
}
.header_icon .ivu-card{
background:transparent;
}



p{
  font-size:16px;
}
.chart_bar{
  height:30vh;
  width:110%;
  margin-left:-5%;
}
.chart_bar1{
  height:38vh;
  width:100%;
}
.card_title{
  width:100%;
  height:3.6vh;
  text-align:center;
    padding-bottom:10px;
    position:relative;  
}
.title{
  font-weight:bolder;
  color:#EFEFEF;
  // border-bottom:solid 1px #f5f5f5;
  text-align:center;
}
.title_data{
  font-weight:bolder;
  color:#666;
  font-size:14px;
  margin-bottom:20px;
  text-align:center;
  width:100%;
  height:1vh;
  position:relative;
}
.title_data span{
  font-size:16px;
  color:#fff;
}
.title_data a{
  position:absolute;
  right:0;
  top:0;
  font-size:12px;
  color:#c3cad9;
  border-bottom:solid 2px #f45e23;
}
.tab{
  float:right;
}
.tab a{
  width:auto;
  padding:0 10px;
  height:28px;
  line-height:28px;
  border:solid 1px #ddd;
  margin-right:10px;
  font-size:14px;
  text-align:center;
  border-radius:4px;
  display:block;
  float:left;
}
.tab a.active{
  background-color:#FF634D;
  color:#fff;
  border:solid 1px #FF634D;
}
.show{
  display:block;
}
.hide{
  display:none;
}
.tab_order .ivu-tabs-bar{
  border-bottom:none;
}
.tab_order .ivu-tabs-bar .ivu-tabs-tab-active{
  background-color:#FF634D!important;
  color:#fff!important;
  border-radius:4px!important;
  border:solid 1px #FF634D!important;
   border-bottom:solid 1px #FF634D!important;
}
.tab_order .ivu-tabs-bar .ivu-tabs-tab{
 border-radius:4px!important;
 border-bottom:solid 1px #dcdee2!important;
}
.model_select{
  width:60px;
  position:absolute;
  right:0;
  top:0;
  height:2vh;
  border:solid 1px #31496e; 
}
.model_select .ivu-select-selection{
  background-color:#0e1d3f!important;
  border:solid 1px #546F94;
  color:#fff;
  border-radius:4px;
  height:2.8vh;
}
.model_select .ivu-select-selection .ivu-select-selected-value{
  height:2.8vh;
  line-height:2.8vh;
}
.pie_percent{
  width:30%;
  display:inline-block;
  height:auto;
}
.pie_percent span{
  text-align:center;
 width:100%;
 display:block;
}
.title_main{
  font-size:30px;
  line-height:5vh;
  margin-bottom:2vh;
}
.demo-Circle-custom{
        & h1{
            color: #fff;
            font-size: 28px;
            font-weight: normal;
        }
        & p{
            color: #fff;
            font-size: 14px;
            margin: 10px 0 15px;
        }
        & span{
            display: block;
            padding-top: 7px;
            color: #fff;
            font-size: 14px;
            &:before{
                content: '';
                display: block;
                width: 50px;
                height: 1px;
                margin: 0 auto;
                background: #3c4764;
                position: relative;
                top: -3px;
            };
        }
        & i{
            font-style: normal;
            color: #3f414d;
        }
        & a{
          color:#fff;
          font-size:16px;
        }
    }
.circle_box{
  display:block;
  margin:0 auto;
  margin-top:5px;
}
.home_open{
  position:fixed;
  top:0;
  left:0;
  width: 0;
  height: 0;
  border-top: 100px solid #3498DB;
  border-right: 100px solid transparent;
 cursor:pointer;
}
.home_open p{
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  position:fixed;
  top:20px;
  left:0; 
  color:#fff;
}
ul,li{
  margin:0;
  padding:0;
}
li{
  list-style:none;
}
.built_box{
  width:100%;
  overflow:hidden;
  position:relative;
}
.built_box .map_label{
 position:absolute;
 left:5%;
 top:10px;
 z-index:9999;
}
.built_box .map_label li{
margin-bottom:10px;
}
.built_box .map_label li span{
  width:14px;
  height:14px;
  background-color:#006fff;
  float:left;
}
.built_box .map_label li:nth-child(2) span{
  background-color:#40bae8;
}
.built_box .map_label li a{
  color:#999;
  padding-left:10px;
  line-height:14px;
}
.nwwest-roll {
  height: 20px;
  overflow: hidden;
}
 
.roll-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.nwwest-roll li {
  height: 35px;
  line-height: 35px;
}
 
.anim {
  transition: all 1s;
}
.card_box{
  width:96%;
  margin:0 auto;
background-color:rgba(11,28,61,0.7);
border:solid 1px #2a3c62;
 box-shadow:rgb(153, 204, 255,0.9) 0px 0px 10px inset;
 border-radius:4px;
 padding:2vh;
}
.count-style {
font-size:18px;
line-height:3.4vh;
}
</style>
